<template>
  <div>
    <!-- 导航区域 -->
    <van-nav-bar fixed placeholder safe-area-inset-top title="文章详情" left-arrow @click-left="$router.back()" />
    <!-- 内容主体 -->
    <div class="main-box">
      <h2>{{ info.title }}</h2>
      <!-- 作者信息区域 -->
      <div class="author-box">
        <van-image round fit="cover" :src="info.aut_photo"></van-image>
        <div class="info-box">
          <div class="name">{{ info.aut_name }}</div>
          <div class="time">{{ info.pubdate | relvTime }}</div>
        </div>
        <van-button size="small" type="info" round icon="plus">关注</van-button>
      </div>
      <!-- 文章内容 -->
      <div class="content" v-html="info.content"></div>
    </div>

    <!-- 评论区域 -->
    <comment />
  </div>
</template>

<script>
// 导入接口
import { detailAPI } from "@/api/article";
// 导入组件
import comment from './comment.vue'

export default {
  components: {
    comment
  },
  data() {
    return {
      info: {},
    };
  },

  async created() {
    const res = await detailAPI(this.$route.query.id);
    this.info = res.data;
  },
};
</script>

<style lang="less" scoped>
.main-box {
  padding: 0 15px;
  h2 {
    font-size: 30px;
    margin: 10px 0;
  }
  .author-box {
    display: flex;
    align-items: center;

    .van-image {
      width: 60px;
      height: 60px;
    }
    .info-box {
      // 代表设置他剩余主轴方向的占比
      flex: 1;
      margin: 0 10px;

      .time {
        font-size: 12px;
        color: gray;
        margin-top: 5px;
      }
    }
  }
  .content {
    margin-top: 20px;

    ::v-deep {
   
      pre,p {
        background-color: black;
        width: 100%;
        overflow: auto;
        color: lightgray !important;
      }

      img {
        width: 100%;
      }
    }
  }
}
</style>